<!--
 * @Author: zhangmengqiong
 * @Date: 2021-04-30 17:03:41
 * @LastEditors: zhangmengqiong
 * @LastEditTime: 2021-04-30 17:16:18
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>L7demo</title>
    <script src="https://unpkg.com/@antv/l7"></script>
  </head>
  <body>
    <div id="map"></div>
  </body>
  <script>
    const scene = new L7.Scene({
      id: 'map',
      map: new L7.GaodeMap({
        pitch: 0, // 角度
        style: 'white',
        center: [96.99215001469588, 29.281597225674773],
        zoom: 2,
        maxZoom: 10,
      }),
    });
    // 地图绘制完成，即scence 加载完成，在绘制点
    scene.on('loaded', () => {
      fetch(
        'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
      )
        .then(res => res.json())
        .then(data => {
          data.features = data.features.filter(item => {
            return item.properties.capacity > 800;
          });
          // 气泡图通过 PointLayer 对象实例化，
          const pointLayer = new L7.PointLayer({})
            .source(data)
            .shape('circle')
            .size('capacity', [0, 16])
            .color('capacity', [
              '#34B6B7',
              '#4AC5AF',
              '#5FD3A6',
              '#7BE39E',
              '#A1EDB8',
              '#CEF8D6',
            ])
            .active(true)
            .style({
              opacity: 0.5,
              strokeWidth: 0,
            });

          scene.addLayer(pointLayer);
        });
    });
  </script>
</html>
